import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

// 使用 Shape 与 ShapeGeometry 根据轮廓计算出其三角面填充模型
const points = [
  new THREE.Vector2(-50, -50),
  new THREE.Vector2(-60, 0),
  new THREE.Vector2(0, 50),
  new THREE.Vector2(60, 0),
  new THREE.Vector2(50, -50),
  new THREE.Vector2(-50, -50)
];

// 创建五边形轮廓
const shape = new THREE.Shape(points);
// 创建轮廓填充几何体
const shapeGeo = new THREE.ShapeGeometry(shape, 25);
const shapeMat = new THREE.MeshBasicMaterial({
  color: 0x0000ff,
  wireframe: true
});
const meshShape = new THREE.Mesh(shapeGeo, shapeMat);
scene.add(meshShape);

// 再弄个圆形
const circleShape = new THREE.Shape();
circleShape.absarc(120, 0, 50, 0, 2 * Math.PI, false);
const circleGeo = new THREE.ShapeGeometry(circleShape);
const meshCircle = new THREE.Mesh(circleGeo, shapeMat);
scene.add(meshCircle);

// 利用 Path 基类的绘制函数来绘制轮廓
const pathShape = new THREE.Shape();
pathShape.moveTo(-200, 0);
pathShape.lineTo(-100, 0);
pathShape.lineTo(-100, 100);
pathShape.lineTo(-200, 100);
pathShape.lineTo(-200, 0);
const rectGeo = new THREE.ShapeGeometry(pathShape);
const meshRect = new THREE.Mesh(rectGeo, shapeMat);
scene.add(meshRect);

const k = innerWidth / innerHeight,
      s = 60,
      camera = new THREE.PerspectiveCamera(s, k, 1, 1000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xeeeeee);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
})();